<template>
  <div>
    <p>以下是一个简单的用户名验证的例子：</p>
    <pre><code class="javascript">{{ code }}</code></pre>
    <p>这个函数接受一个字符串参数 <code>username</code>，返回一个布尔值。它会检查这个用户名是否满足以下要求：</p>
    <p>长度在4到16之间</p>
    <p>仅包含字母、数字、下划线</p>
  </div>
</template>

<script>
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/github.css';

hljs.registerLanguage('javascript', javascript);

export default {
  data() {
    return {
      code: `function isValidUsername(username) {
  // 长度在4到16之间
  if (username.length < 4 || username.length > 16) {
    return false;
  }
  // 仅包含字母、数字、下划线
  if (!/^[a-zA-Z0-9_]+$/.test(username)) {
    return false;
  }
  return true;
}

// 使用示例
console.log(isValidUsername('user123')); // true
console.log(isValidUsername('user name')); // false
console.log(isValidUsername('abc')); // false
console.log(isValidUsername('01234567890123456')); // false`
    };
  },
  mounted() {
    hljs.highlightAll();
  }
};
</script>
